<template>
    <div class="monitor-con">
        <headNav title="校园监控"></headNav>
        <div class="neck-p">请选择监控位置</div>
        <div class="one-menu">
            <div class="two-menu">楼</div>
            <div class="two-menu">室</div>
            <div class="two-menu">探头编号</div>
            <div class="two-menu">楼</div>
            <div class="two-menu">室</div>
            <div class="two-menu">探头编号</div>
        </div>
        <div class="list-p">
            <div class="list-item">第一教学楼</div>
            <div class="list-item">第一教学楼</div>
            <div class="list-item">第一教学楼</div>
            <div class="list-item">第一教学楼</div>
            <div class="list-item">第一教学楼</div>
        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
export default {
    components: {
        headNav
    }
}
</script>
<style scoped>
.monitor-con{
    background: #fff;
}
.neck-p{
    color: #666666;font-size: 0.28rem;padding: 0.32rem 0.24rem; background: #F5F5F5;
}
.one-menu{
    width: 100%; overflow-x: scroll;font-size: 0; white-space: nowrap;
}
.two-menu{
    display: inline-block; width: 2.4rem; height: 0.84rem; line-height: 0.84rem; vertical-align: middle;
    font-size: 0.28rem; color: #333; text-align: center; background: #E7F2FA;
}
.list-p{
    height: calc(100% - 2.75rem); padding: 0.24rem 0; box-sizing: border-box;
}
.list-item{
    font-size: 0.28rem; color: #666; background: #F7F7F7; width: 2.08rem; height: 0.72rem; line-height: 0.72rem;
    text-align: center; display: inline-block; border-radius: 0.1rem; margin: 0 0 0.2rem 0.2rem;
}
</style>